<template>
  <div class="popup">
    <!-- 头部 -->
    <div class="popup_header">
      <div class="text">
        <van-cell @click="showPopup"
          ><h2 v-if="chen2 == false&&chen1==false&&chen==false">{{ mylist.title}}</h2>
          <h2 v-if="chen == true || chen1 == true || chen2 == true">
            选择考试>
          </h2>
        </van-cell>
      </div>
      <div>
        <van-icon name="search" />
        <img src="../assets/img/客服.png" alt="" />
      </div>
    </div>
    <!-- 头部tab -->
    <div class="top">
      <van-tabs v-model:active="active" @click-tab="chentab">
        <van-tab title="精选"> </van-tab>
        <van-tab
          :title="item.title"
          v-for="(item, index) in tabdata"
          :key="index"
        >
          <!--轮播图  -->
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item v-for="(item, index) in banderdata" :key="index"
              ><img :src="item.banner_img" alt=""
            /></van-swipe-item>
          </van-swipe>
          <div>
            <img class="maozhua" src="../assets/img/猫爪.png" alt="" />
            <h6>距离考研120天</h6>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 直播 -->
    <div class="body">
      <div class="body_top">
        <h4>{{ zhibuodata.model_name }}</h4>
        <p>查看全部></p>
      </div>
      <div class="body_data">
        <div
          class="ul_"
          v-for="(item, index) in zhibuodata.course_list"
          :key="index"
        >
          <img :src="item.banner_img" alt="" />
          <p class="p_one">{{ item.title }}</p>
          <van-button round color="#ef5b30" size="mini" type="success">{{
            item.price == "0" ? "免费" : "￥" + item.price / 100 + "0"
          }}</van-button>
          <p class="p_tow">{{ item.sales_num }} 人已报名</p>
        </div>
      </div>
    </div>
    <!-- 底部tab -->
    <div class="tabar">
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">首页</van-tabbar-item>
        <van-tabbar-item icon="play-circle-o">我的课</van-tabbar-item>
        <van-tabbar-item icon="wap-home-o">喵窝</van-tabbar-item>
        <van-tabbar-item icon="setting-o">工具</van-tabbar-item>
        <van-tabbar-item icon="manager-o">我的</van-tabbar-item>
      </van-tabbar>
    </div>
    <!-- 弹框1 -->
    <van-popup v-model:show="chen" position="bottom" :style="{ height: '65%' }">
      <div class="title">选择考试</div>
      <ul>
        <li v-for="(item, index) in mydata" :key="index" @click="next(item)">
          <p class="p_one">{{ item.title }}</p>
          <p class="p_tow">{{ item.brief }}</p>
        </li>
      </ul>
    </van-popup>
    <!-- 弹框2 -->
    <van-popup
      v-model:show="chen1"
      position="bottom"
      :style="{ height: '65%' }"
    >
      <ul>
        <div class="title">
          <van-icon name="arrow-left" @click="fff" />
          <p>{{ mylist.title }}</p>
        </div>
        <li @click="nexttow">
          <p class="p_one chen_">在校生</p>
        </li>
        <li @click="nexttow">
          <p class="p_tow chen_">在职</p>
        </li>
      </ul>
    </van-popup>
    <!-- 弹框3 -->
    <van-popup
      v-model:show="chen2"
      position="bottom"
      :style="{ height: '65%' }"
    >
      <ul>
        <div class="title">
          <van-icon name="arrow-left" @click="fff2" />
          <p>{{ mylist.title }}</p>
          <van-button type="primary" color="#ef5b30" size="mini" @click="ok"
            >完成</van-button
          >
        </div>
        <li v-for="(item, index) in chendata" :key="index" @click="goto(item)">
          <p class="p_one chen_">{{ item.major_name }}</p>
        </li>
      </ul>
    </van-popup>
  </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import {
  PopupApi,
  PopupChenApi,
  TabChenApi,
  BanderApi,
  ZhibuoApi,
} from "../http/https";
export default {
  setup(props) {
    const { push } = useRouter();
    const data = reactive({
      mydata: [],
      mylist: [],
      classify_id: "",
      chendata: [],
      tabdata: [],
      banderdata: [],
      zhibuodata: [],
      active: 0,
    });
    // 弹框显示
    const chen = ref(true);
    const chen1 = ref(false);
    const chen2 = ref(false);
    // 点击显示1弹框
    PopupApi().then((res) => {
      console.log(res);
      data.mydata = res.data.data;
      // console.log(data.mydata);
    });
    // 切换弹框1到2
    const next = (e) => {
      console.log(e);
      data.classify_id = e.id;
      data.mylist = e;
      chen.value = false;
      chen1.value = true;
    };
    // 返回上一个弹框2到1
    const fff = () => {
      chen.value = true;
      chen1.value = false;
    };
    // 切换弹框2到3
    const nexttow = () => {
      chen2.value = true;
      chen1.value = false;
      console.log(data.classify_id);
      PopupChenApi(data.classify_id).then((res) => {
        console.log(res);
        data.chendata = res.data.data;
      });
    };
    // 返回上一个弹框3到2
    const fff2 = () => {
      chen2.value = false;
      chen1.value = true;
    };
    // 点击进入首页
    const goto = (e) => {
      console.log(e);
      TabChenApi(data.classify_id).then((res) => {
        console.log(res);
        data.tabdata = res.data.data;
      });
    };
    // 关闭弹框
    const ok = () => {
      chen2.value = false;
    };
    // tab
    const chentab = (e) => {
      console.log(e);
      BanderApi(e.name).then((res) => {
        console.log(res);
        data.banderdata = res.data.data;
      });
      console.log(data.mylist.id);
      ZhibuoApi(data.mylist.id).then((res) => {
        console.log(res);
        data.zhibuodata = res.data.data;
      });
    };

    return {
      ...toRefs(data),
      ok,
      chentab,
      goto,
      fff2,
      chen,
      chen1,
      chen2,
      next,
      fff,
      nexttow,
    };
  },
  components: {},
};
</script>
<style scoped lang='scss'>
.popup {
  width: 100%;
  height: 200px;
  .popup_header {
    width: 100%;
    height: 88px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .text {
      margin-left: 20px;
    }
    img {
      width: 50px;
      height: 50px;
      margin-right: 20px;
      margin-left: 20px;
    }
  }
  .title {
    width: 80%;
    height: 88px;
    margin: 30px auto;
    text-align: center;
    position: relative;
    .van-button {
      position: absolute;
      right: 20px;
      top: 10px;
    }
  }
  ul {
    .van-icon {
      position: absolute;
      left: 0;
    }
    li {
      overflow: hidden;
      margin: 20px auto;
      text-align: center;
      font-size: 30px;
      width: 80%;
      height: 88px;
      background: #f8f8f5;
      border-radius: 50px;
      .p_one {
        margin-top: 10px;
      }
      .p_tow {
        font-size: 16px;
      }
    }
    li:hover {
      color: #fff;
      background: red;
    }
  }
  .top {
    width: 100%;
    text-align: center;
    background: #fafafa;
    img {
      margin-top: 20px;
      width: 95%;
      height: 300px;
      border-radius: 20px;
      margin-left: 20px;
    }
    .maozhua {
      width: 100px;
      height: 50px;
    }
    h6 {
      color: #ccc;
    }
  }
  .body {
    width: 100%;
    .body_top {
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h4 {
        margin-left: 20px;
      }
      p {
        font-size: 16px;
        margin-right: 20px;
      }
    }
    .body_data {
      font-size: 30px;
      width: 100%;
      height: 300px;
      display: flex;
      margin-top: 30px;
      .ul_ {
        flex: 1;
        margin-left: 10px;
        margin-right: 10px;
        position: relative;
        text-align: center;
        background: #eaeaea;
        .van-button {
          width: 150px;
        }
        img {
          left: 65px;
          top: -20px;
          position: absolute;
          width: 100px;
          height: 100px;
          border-radius: 50%;
          background: red;
        }
        .p_one {
          margin-top: 100px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
        }
        .p_tow {
          color: #ef5b30;
        }
      }
    }
  }
}
</style>
